// Vue2中引入的是Vue构造函数（需要通过new关键字调用），这里引入的是一个名为createApp的工厂函数

import { createApp } from 'vue'

import App from './App.vue'
// 引入路由
import router from './router'
// 引入store
import store from './store'
// 添加异步请求，与后端接口相连,先引入axios
import axios from 'axios'
axios.defaults.baseURL = 'http://apis.imooc.com/api/'
axios.interceptors.request.use(config => {
    config.params = { ...config.params, icode: '096B53B5268071C3' }
    // 如果是上传文件，添加到FormData中
    if (config.data instanceof FormData) {
        config.data.append('icode', '096B53B5268071C3')
    } else {
        // 普通的 body 对象，添加到 data 中
        config.data = { ...config.data, icode: '096B53B5268071C3' }
    }
    store.commit('setLoading', true)
    store.commit('setError', { status: false, message: '' })
    return config
})
axios.interceptors.response.use(config => {
    store.commit('setLoading', false)
    return config
}, e => {
    const { error } = e.response.data
    store.commit('setError', { status: true, message: error })
    store.commit('setLoading', false)
    return Promise.reject(e.response.data)
})
// 创建应用实例对象--app（类似于Vue2中的vm，但app比vm更“轻”，属性和方法没有vm多
const app = createApp(App)
// 在全局中使用路由
app.use(router)
// 在全局使用vuex
app.use(store)
// 挂载
app.mount('#app')
// 注意这里要先use路由再将页面挂载，不然上去router-view区域是无法显示的。
